<template>
	  <transition name="fade">

						<!--<div class="position-horizontal-demo" v-for="(item,index) in classList" @click="selectClass(item)">
							<span class="vux-close">
									{{item.deptName}}
							</span>
						</div>-->
							<div class="newlist" style="height:75vh">
				<!--<x-header title="选择被检查单位"></x-header>-->
										<div class="tree-menu" style="background: #fff">
												<ul class="showul" v-for="(menuItem,index) in data" :key="index">
													 <my-tree  :model="menuItem"  :type="type" :name="name" :show-checkBox="showCheckBox"></my-tree>
												</ul>
									 </div>
									 <div class="c_loading" v-show="isLoading">
										<div class="c_container">
											<div class="loadEffect">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span></span>
											</div>
										</div>
									</div>
							</div>

      </transition>
</template>

<script>
//  import testData from './testdata';
import myTree from './treemenu';
import { XHeader,Tabbar, TabbarItem, Group, Cell ,TransferDom, Popup} from 'vux'
export default {
  name: 'App',
  data () {
      return {
        theModel: [],
        userId:"",
        tokenId:"",
        projectId:"",
        userInfo:"",
				// isTree:true,
				// classValue:false,
				// data:[]
      }
 },
   directives:{
     TransferDom
 },
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    XHeader,
     myTree,
			Popup

  },
// 	render:(createElement)=>{
// 		 return createElement(
// 		    'h1',"123123"
// 			)
// 	},
	watch:{
// 		classValue(val){
// 			 this.$emit("update:classValue",val);
//        this.$forceUpdate();
// 		}
	},
	props:{
		 data:{
			  type:Array,
				default:[]
		 },
		 classValue:{
			 type:Boolean,
			 default:false,
		 },
		 name:{
			 type:String,
			 default:'Name',
		 },
		 type:{
			 type:String,
			 default:"company"
		 },
		 showCheckBox:{
			 type:Boolean,
			 default:false
		 },
		 isLoading:{
			 type:Boolean,
			 default:false
		 }
	},
  created() {
		this.isTree = true;
  },
  methods:{
      selectUser(data){
		// debugger
	},
  },
	destroyed() {
		this.classValue = false;
	}

}
</script>

<style scoped lang="less">
.newlist{
  background-color:#fff;
}
.fade-enter-active,.fade-leave-active{
	 transition:opacity 5s;
}
.fade-enter,.fade-leave-to{
	 opacity: 0;
}
.c_loading {
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.c_container {
	position: absolute;
	width:100px;
	height:100px;
	left: 50%;
	top: 50%;
	margin-left: -60px;
	margin-top: -60px;
	background-color: rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
	padding: 10px;
	border-radius: 8px;
}
.loadEffect {
	width:80px;
	height:80px;
	position: absolute;
	left: 10px;
	top: 10px;
}
.loadEffect span {
	display:inline-block;
	width:10px;
	height:10px;
	border-radius:50%;
	background:#fff;
	position:absolute;
	-webkit-animation:load 1.04s ease infinite;
}
@-webkit-keyframes load {
	0% {
	opacity:1;
}
100% {
	opacity:0.2;
}
}
.loadEffect span:nth-child(1) {
	left:0;
	top:50%;
	margin-top:-5px;
	-webkit-animation-delay:0.13s;
}
.loadEffect span:nth-child(2) {
	left:11px;
	top:11px;
	-webkit-animation-delay:0.26s;
}
.loadEffect span:nth-child(3) {
	left:50%;
	top:0;
	margin-left:-5px;
	-webkit-animation-delay:0.39s;
}
.loadEffect span:nth-child(4) {
	top:11px;
	right:11px;
	-webkit-animation-delay:0.52s;
}
.loadEffect span:nth-child(5) {
	right:0;
	top:50%;
	margin-top:-5px;
	-webkit-animation-delay:0.65s;
}
.loadEffect span:nth-child(6) {
	right:11px;
	bottom:11px;
	-webkit-animation-delay:0.78s;
}
.loadEffect span:nth-child(7) {
	bottom:0;
	left:50%;
	margin-left:-5px;
	-webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8) {
	bottom:11px;
	left:11px;
	-webkit-animation-delay:1.04s;
}
</style>
